import React, { RefObject } from 'react';
import { Button, Dropdown, Tooltip } from 'antd';
import {
  BoldOutlined,
  ItalicOutlined,
  UnderlineOutlined,
  StrikethroughOutlined,
  LinkOutlined,
  PictureOutlined,
  CodeOutlined,
  OrderedListOutlined,
  UnorderedListOutlined,
  TableOutlined,
  FontSizeOutlined,
} from '@ant-design/icons';
import './style.css';

interface MarkdownToolbarProps {
  textareaRef: RefObject<HTMLTextAreaElement>;
  value: string;
  onChange: (value: string) => void;
}

const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
  textareaRef,
  value,
  onChange,
}) => {
  const insertMarkdown = (before: string, after: string = '', placeholder: string = '') => {
    const textarea = textareaRef.current;
    if (!textarea) return;

    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    const selectedText = value.substring(start, end) || placeholder;
    const newValue = value.substring(0, start) + before + selectedText + after + value.substring(end);

    onChange(newValue);

    // 恢复焦点和选择
    setTimeout(() => {
      textarea.focus();
      const newCursorPos = start + before.length + selectedText.length;
      textarea.setSelectionRange(newCursorPos, newCursorPos);
    }, 0);
  };

  const headingMenuItems = [
    {
      key: 'h1',
      label: 'H1 一级标题',
      onClick: () => insertMarkdown('# ', '', '标题文本'),
    },
    {
      key: 'h2',
      label: 'H2 二级标题',
      onClick: () => insertMarkdown('## ', '', '标题文本'),
    },
    {
      key: 'h3',
      label: 'H3 三级标题',
      onClick: () => insertMarkdown('### ', '', '标题文本'),
    },
    {
      key: 'h4',
      label: 'H4 四级标题',
      onClick: () => insertMarkdown('#### ', '', '标题文本'),
    },
    {
      key: 'h5',
      label: 'H5 五级标题',
      onClick: () => insertMarkdown('##### ', '', '标题文本'),
    },
    {
      key: 'h6',
      label: 'H6 六级标题',
      onClick: () => insertMarkdown('###### ', '', '标题文本'),
    },
  ];

  return (
    <div className="markdown-toolbar">
      <div className="toolbar-section">
        {/* 文本格式 */}
        <Tooltip title="粗体 (Ctrl+B)">
          <Button
            type="text"
            icon={<BoldOutlined />}
            onClick={() => insertMarkdown('**', '**', '粗体文本')}
            className="toolbar-button"
          />
        </Tooltip>

        <Tooltip title="斜体 (Ctrl+I)">
          <Button
            type="text"
            icon={<ItalicOutlined />}
            onClick={() => insertMarkdown('*', '*', '斜体文本')}
            className="toolbar-button"
          />
        </Tooltip>

        <Tooltip title="删除线">
          <Button
            type="text"
            icon={<StrikethroughOutlined />}
            onClick={() => insertMarkdown('~~', '~~', '删除线文本')}
            className="toolbar-button"
          />
        </Tooltip>
      </div>

      <div className="toolbar-divider" />

      <div className="toolbar-section">
        {/* 标题 */}
        <Dropdown menu={{ items: headingMenuItems }} placement="bottomLeft">
          <Tooltip title="标题">
            <Button
              type="text"
              icon={<FontSizeOutlined />}
              className="toolbar-button"
            />
          </Tooltip>
        </Dropdown>
      </div>

      <div className="toolbar-divider" />

      <div className="toolbar-section">
        {/* 列表 */}
        <Tooltip title="无序列表">
          <Button
            type="text"
            icon={<UnorderedListOutlined />}
            onClick={() => insertMarkdown('- ', '', '列表项')}
            className="toolbar-button"
          />
        </Tooltip>

        <Tooltip title="有序列表">
          <Button
            type="text"
            icon={<OrderedListOutlined />}
            onClick={() => insertMarkdown('1. ', '', '列表项')}
            className="toolbar-button"
          />
        </Tooltip>
      </div>

      <div className="toolbar-divider" />

      <div className="toolbar-section">
        {/* 插入 */}
        <Tooltip title="链接">
          <Button
            type="text"
            icon={<LinkOutlined />}
            onClick={() => insertMarkdown('[', '](url)', '链接文本')}
            className="toolbar-button"
          />
        </Tooltip>

        <Tooltip title="图片">
          <Button
            type="text"
            icon={<PictureOutlined />}
            onClick={() => insertMarkdown('![', '](url)', '图片描述')}
            className="toolbar-button"
          />
        </Tooltip>

        <Tooltip title="代码块">
          <Button
            type="text"
            icon={<CodeOutlined />}
            onClick={() => insertMarkdown('```\n', '\n```', '代码')}
            className="toolbar-button"
          />
        </Tooltip>

        <Tooltip title="表格">
          <Button
            type="text"
            icon={<TableOutlined />}
            onClick={() =>
              insertMarkdown(
                '| 列1 | 列2 | 列3 |\n| --- | --- | --- |\n| ',
                ' | | |\n',
                '内容'
              )
            }
            className="toolbar-button"
          />
        </Tooltip>
      </div>
    </div>
  );
};

export default MarkdownToolbar;
